<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>穿梭框</title>
    <!-- vue前端js框架 -->
    <script src="../js/vue.js"></script>
    <!-- 这个一定在vue.js前端框架的后面 -->
    <script src="../js/elementui.js"></script>
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div id="app">
        <template>
            <el-transfer v-model="value" :data="data"></el-transfer>
        </template>

        
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            const generateData = _ => {
                const data = [];
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: `备选项 ${i}`,
                        disabled: i % 4 === 0
                    });
                }
                return data;
            };
            return {
                data: generateData(),
                value: [1, 4]
            };
        }
    })
</script>

</html>